<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*相邻兄弟选择器： 用+表示相邻，相邻是向下相邻且必须是 直接相邻。由于是直接相邻，因此只能影响一个*/
        /*   p li p   => p+p  =>不会有任何变化，因为p不是直接相邻第一个p，因此不会改变*/
        div.p1 div+p{
            color:red;
        }
        /*通用兄弟选择器:  用~表示，将所有的 兄弟均进行改变，但 自身不会变*/
        div.p2 p~p{     /*p~p:先找到p2区域，之后在该区域找第一个p，之后找相邻的p，将其变色*/
            color:blue;
        }
        /*无论何种方式，其均是从事往下找，只要找到对应的标签就是对应区域。*/
    </style>
</head>
<body>
    <div class="p1">
        <div>p1</div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div class="p2">
        <p>p2</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</body>
</html>